<template>
  <!-- Login整个页面 -->
  <!-- <div class="login_container" img = "../assets/img/bg.png"> -->
  <div class="login_container" img = "../assets/img/bg.jpg">
    <!-- 登录块 -->
    <div class="login_box">
      <!-- logo区域 -->
      <div class="avatar-box">
        <!-- <img src="../assets/img/avatar.png" alt="" class="aligncenter"  /> -->
        <img src="../assets/img/avatar.jpg" alt="" class="aligncenter"  />
      </div>
      <!-- 表单区域 -->
     <el-form ref="loginFormRef" :model="loginForm" :rules="loginrules" label-width="80px" class="login_form">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="name">
            <el-input v-model="loginForm.name"  prefix-icon="el-icon-user" ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" prefix-icon="el-icon-unlock" type="password" ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
            <el-button type="primary" @click="login(loginForm)">登录</el-button>
            <el-button type="info" @click="resetLoginForm()">重置</el-button>
        </el-form-item>
     </el-form>
    </div>
  </div>
</template>
 
   

<script>
import {AdminLogin} from '@/api/login/login.js'
  export default {
    data() {
      return {
        //表单数据对象
        loginForm: {
          name: 'admin0',
          password: '123456'
        },
        //验证对象
        loginrules:{
            //检验用户名
             name: [
            { required: true, message: '用户名为必填项', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 ~ 10 个字符', trigger: 'blur' }
          ],
          //检验密码
           password: [
            { required: true, message: '密码为必填项', trigger: 'blur' },
            { min: 6, max: 19, message: '长度在 6 ~ 19 个字符', trigger: 'blur' }
          ],
        },
      }
    },
    methods: {
       //重置表单方法
      resetLoginForm() {
          this.$refs.loginFormRef.resetFields();
      },
      //登录事件方法
      login(loginForm) {
        //验证校验规则
        this.$refs.loginFormRef.validate(valid =>{
            if(valid){
                loginForm.password = this.$md5(loginForm.password)
                AdminLogin(loginForm).then((res) => {
                    //打印返回信息
                    // console.log(res);
                    if (res.data.code == 200){
                        this.$message.success("登录成功");
                        //存储token
                        window.sessionStorage.setItem('token',res.data.data.token);
                        //存储登录信息
                        window.sessionStorage.setItem('admin',res.data.data.admin);                                       
                        this.$router.push({path:'/home'});
                        location.reload();
                    }else{
                        this.$message.error(res.data.message)
                    }
                });
            }else{
                this.$message.error("登录信息不完整");
            }
        });
        
      },
  
  
  }

}
</script>
<style>
/* Login整个页面样式 */
.login_container{
    background: url("../assets/img/bg.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
}
/*登录块样式 */
.login_box{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 150px auto;
    width: 440px;
    /* height: 400px; */
    padding: 35px 35px 15px 35px;
    background:  #639DFF;
    border: 1px solid #3C85FF ;
    box-shadow: 0 0 25px  #266EE8 ;
    
}
/* logo图片样式 */
.aligncenter {
    width: 180px;
    height: 180px;
    clear: both;
    display: block;
    margin: 30px auto;
    border-radius: 50%;
}
.btns{
    text-align:center;
}
</style>
